<template>
 <ul class="news-list">
  <!-- query传参的写法 -->
  <!-- <li class="news-item-detail">编号: {{ query.id }}</li>
  <li class="news-item-detail">标题: {{ query.title }}</li>
  <li class="news-item-detail">内容: {{ query.content }}</li> -->

  <!-- 通过路由组件传参的写法 -->
  <li class="news-item-detail">编号: {{ id }}</li>
  <li class="news-item-detail">标题: {{ title }}</li>
  <li class="news-item-detail">内容: {{ content }}</li>
 </ul>
</template>
<script lang="ts" setup>
// import { toRefs } from 'vue';
// import { useRoute } from 'vue-router';
// const route = useRoute()

// 直接解构回丢失响应性
// const {query} = route
// const {query} = toRefs(route)

defineProps(['id', 'title', 'content'])
</script>
<style scoped>
.news-list {

  display: flex;
  flex-direction: column;
}
.news-item-detail {
  margin-top: 10px;
}
</style>
